<!-- http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS布局-flex</title>
    <link rel="stylesheet" href="./center.css"> 
    <style>
        .parent {
            width: 100px;
            height: 100px;
            background: yellow;
            border: 1px solid #000;
            /* display: flex;
            justify-content: center;
            align-items: center; */
            /* line-height: 1; */
            /* position: relative; */
            /* display: table; */
            /* display: grid; */
            /* position: relative; */
            /* display: flex; */
            /* display: table-cell;
            vertical-align: middle;
            text-align: center; */
            display: table;
        }
        .children {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            background-color: red;
            width: 50px;
            height: 10px;
            /* justify-self: center;
            align-self: center; */
            /* margin: 0 auto; */
            /* position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); */
            /* justify-content: center; */
            /* position: absolute; */
            /* top: 50%;
            left: 50%;
            margin-left: -25px;
            margin-top: -5px; */
            /* left: 0;
            top: 0;
            right: 0;
            bottom: 0; */
            /* margin: auto; */
        }
        .child {
            display: inline-block;
            width: 10px;
            height: 5px;
            background-color: black;
            /* display: none; */
        }
        .container {
            display: flex;
            flex-direction: row;
            height: 50px;
        }
        .main { 
            width: 20%;
            height: 100%;
            order: 2;
            border: 1px solid #000;
        }
        .sub {
            width: 50%;
            height: 100%;
            order: 1;
            border: 1px solid #000;
        }
        .extra {
            width: 30%;
            height: 100%;
            order: 3;
            border: 1px solid #000;
        }
    </style>  
</head>
<body>
    <!-- flex order -->
    <div class="container">
      <div class="main">main</div>
      <div class="sub">sub</div>
      <div class="extra">extra</div>
    </div>
    <div class="parent">
        <div class="children">
            <div class="child"></div>
        </div>
    </div>
</body>
</html>